<template>
	<el-menu>
		<menu-item :menuList="menuList" :clickCallback="onClick">
			<template v-slot:subTitle="item">
				<slot name="subTitle" v-bind="item.meta">
					<slot v-bind="item.meta"></slot>
					<span>{{ item.meta?.title || item.name }}</span>
				</slot>
			</template>
			<template v-slot:title="item">
				<slot name="title" v-bind="item.meta">{{ item.meta?.title || item.name }}</slot>
			</template>
			<template v-slot="item">
				<slot v-bind="item.meta"></slot>
			</template>
		</menu-item>
	</el-menu>
</template>

<script lang="ts" setup>
import MenuItem from './menuItem.vue';
import { MenuType } from './useMenu';

defineOptions({ name: 'YFMenu' })
defineProps<{ menuList: MenuType[] }>();

const emits = defineEmits<{
	(event: 'click', handle: Event, row: MenuType): void;
}>();

const onClick = (handle: Event, data: MenuType) => {
	// console.log('chenyf12', handle, data)
	emits('click', handle, data);
}
</script>

<style lang="scss" scoped></style>